<template>
	<view class="body">
		
		<view class="other_textarea">
			<textarea placeholder-style="color:#F76260" placeholder="请描述具体的信息" v-model="info" />
		</view>
		<view class="contact">
			<view class="contact_text">
				联系方式：
			</view>
			<view class="contact_input">
				<input value=""  placeholder="请输入您的手机号码" v-model="phone"/>
			</view>
		</view>
		<view class="location">
				<view class="locationBtn">
			<view class="">灾情位置：</view>
		</view>
		<view class="locationInfo" @click="getLocation()">
		{{locationInfo.detail}}
		</view>
		</view>
	
		<view class="btn">
			<button class=""  :type="btnType" @click="sub()">提交</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: 'otherDanger1',
						name: '轻微伤害'
					},
					{
						value: 'otherDanger2',
						name: '重大伤害',
						checked: 'true'
					},
					{
						value: 'otherDanger3',
						name: '人员死亡'
					},
				],
				current: 0,
				info:'',
				phone:'',
				btnType:"primary",
				locationInfo:{
					name:"",
					detail:"点击定位",
					logitude:0,
					latitude:0
				}
			}
		},
		methods: {
			sub(){
				if(this.info==''||this.phone==''){
					uni.showToast({
						icon:"none",
						title:'请完善相关信息！',
					})
				}else{
					uni.request({
						data:{
							degree:"",
							info:this.info,
							type:'其他',
							phone:this.phone,
							location:this.locationInfo.detail,
							uid:getApp().globalData.uid
						},
						method:'GET',
						url:'http://47.93.42.155:8080/WePrevent/UploadDisasterServlet',
						success: (res) => {
							uni.showToast({
								icon:"none",
								title:res.data,
							})
						}
					})
				}
				
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						if(i==2){
							this.btnType="warn"
						}else{
							this.btnType="primary"
						}
						break;
					}
				}
			},
			getLocation(){
				uni.chooseLocation({
				    success: (res)=> {
						console.log(this.$data)
				        console.log('位置名称：' + res.name);
						this.locationInfo.name = res.name
				        console.log('详细地址：' + res.address);
						this.locationInfo.detail = res.address; 
				        console.log('纬度：' + res.latitude);
						this.locationInfo.latitude = res.latitude; 
				        console.log('经度：' + res.longitude);
						this.locationInfo.longitude = res.longitude; 
						//this.locationInfo = {"name":res.name,"detail":res.address,""}
				    }
				});
				console.log(this.locationInfo.detail);
				
			}
		}
	}
</script>

<style lang="scss">
	.body {
		padding: 0rpx 20rpx;
		padding-top: 20rpx;
		.title{
			font-size: 40rpx;
			font-weight: bold;
			text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
			display: flex;
		}
		
		.list_body{
			.list_item{
				display: flex;
				
				
			}
		}
		.other_textarea{
			//width: 100%;
			background-color: #e8fff4;
			margin-top: 30rpx;
			border-radius: 20rpx;
			padding: 10rpx 0rpx;
			padding-left: 20rpx;
			box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.1);
			textarea{
				width: 98%;
			}
		}
		.contact{
			display: flex;
			align-items: center;
			margin-top: 25rpx;
			
			border-radius: 20rpx;
			input{
				font-size: 35rpx;
			}
		}
		.btn{
			margin-top: 25rpx;
		}
		.location{
			
			display: flex;
			.locationBtn{
				
			}
			align-items: center;
			.locationInfo{
				margin-left: 10rpx;
				font-size: 30rpx;
			}
		}

	}
</style>
